@import "./variables";

// @media(pointer: fine) {
// 	html,body,a,button,input[readonly],.select_wrap[disabled] select,.mp_progress_bar_wrap,.mp_control_item,.mp_video_play,body .slider_nav {
// 		cursor: none;
// 	}

// 	.cursor {
// 		opacity: 1;
// 		display: block;
// 		-webkit-transition: opacity .3s;
// 		transition: opacity .3s;
// 		position: fixed;
// 		width: 1px;
// 		height: 1px;
// 		overflow: visible;
// 		z-index: 7000;
// 		pointer-events: none;
// 		will-change: transform opacity;
// 		-webkit-transform: translate3D(-100px,0,0);
// 		-ms-transform: translate3D(-100px,0,0);
// 		transform: translate3D(-100px,0,0);
// 		left: 0;
// 		top: 0
// 	}

// 	.cursor div {
// 		display: block;
// 		position: absolute;
// 		top: 50%;
// 		left: 50%;
// 		-webkit-transform: translate(-50%,-50%);
// 		-ms-transform: translate(-50%,-50%);
// 		transform: translate(-50%,-50%)
// 	}

// 	.cursor svg {
// 		-webkit-transition: all .3s ease;
// 		transition: all .3s ease
// 	}

// 	.cursor circle {
// 		-webkit-transition: fill .3s ease;
// 		transition: fill .3s ease;
// 		fill: rgba(255,255,255,0)
// 	}

// 	.cursor_highlight svg {
// 		-webkit-transform: scale(2.56);
// 		transform: scale(2.56)
// 	}

// 	.cursor_highlight circle {
// 		fill: rgba(255,255,255,1)
// 	}

// 	.cursor_input svg {
// 		-webkit-transform: scale(0);
// 		transform: scale(0)
// 	}
// }

//  全局样式
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
	box-sizing: border-box;
	outline: none;
}

html {
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}

body {
	/* font-family: Arial, Helvetica, sans-serif;*/
	/* line-height: 1.2em; */
	background: #ffffff;
	padding: 0;
	margin: 0;
	font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
	color: #333;
	font-size: 12px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	line-height: 1.5;
	visibility: hidden;
}

a {
	color: #343440;
	text-decoration: none;
}

// html,
// body,
// a {
// 	cursor: url(../icon/circle.svg) 15 15, auto;
// }

.clearfix {
	&::after {
		content: "";
		display: table;
		height: 0;
		line-height: 0;
		visibility: hidden;
		clear: both;
	}
}

//浮动
.float-r {
	float: right;
}

//浮动
.float-l {
	float: left;
}

// 字体加粗
.fw-b {
	font-weight: bold;
}

//文章一行显示，多余省略号显示
.title-item {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bg-color-black {
	background-color: rgba(19, 25, 47, 0.6);
}

.bg-color-blue {
	background-color: #1a5cd7;
}

.colorBlack {
	color: #272727 !important;

	&:hover {
		color: #272727 !important;
	}
}

.colorGrass {
	color: #33cea0;

	&:hover {
		color: #33cea0 !important;
	}
}

.colorRed {
	color: #ff5722;

	&:hover {
		color: #ff5722 !important;
	}
}

.colorText {
	color: #d3d6dd !important;

	&:hover {
		color: #d3d6dd !important;
	}
}

.colorBlue {
	color: #257dff !important;

	&:hover {
		color: #257dff !important;
	}
}

/****** 滚动条 ******/
.scrollbar-section {
	height: 100%;
}

.scrollbar-section .el-scrollbar__wrap {
	overflow-x: auto;
	min-height: 100%;
}

.scrollbar-section .el-scrollbar__view {
	min-height: 100%;
}

.el-scrollbar {
	overflow: hidden;
	position: relative;
}

.el-scrollbar:active>.el-scrollbar__bar,
.el-scrollbar:focus>.el-scrollbar__bar,
.el-scrollbar:hover>.el-scrollbar__bar {
	opacity: 1;
	transition: opacity .34s ease-out;
}

.el-scrollbar__wrap {
	overflow: scroll;
	height: 100%;
}

.el-scrollbar__wrap--hidden-default {
	scrollbar-width: none;
}

.el-scrollbar__wrap--hidden-default::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.el-scrollbar__thumb {
	position: relative;
	display: block;
	width: 0;
	height: 0;
	cursor: pointer;
	border-radius: inherit;
	background-color: rgba(144,147,153,.3);
	transition: background-color .3s;
}

.el-scrollbar__thumb:hover {
	background-color: rgba(144,147,153,.5);
}

.el-scrollbar__bar {
	position: absolute;
	right: 2px;
	bottom: 2px;
	z-index: 1;
	border-radius: 4px;
	opacity: 0;
	transition: opacity .12s ease-out;
}

.el-scrollbar__bar.is-vertical {
	width: 6px;
	top: 2px;
}

.el-scrollbar__bar.is-vertical > div {
	width: 100%;
}

.el-scrollbar__bar.is-horizontal {
	height: 6px;
	left: 2px;
}

.el-scrollbar__bar.is-horizontal > div {
	height: 100%;
}
/****** 滚动条 ******/

img {
	max-width: 100%;
}

.el-loading-parent--relative {
	position: relative!important
}

.el-loading-parent--hidden {
	overflow: hidden!important
}

.el-loading-mask {
	display: none;
	position: absolute;
	z-index: 2000;
	background-color: hsla(0,0%,100%,.9);
	margin: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: opacity .3s
}

.el-loading-mask.is-fullscreen {
	position: fixed
}

.el-loading-mask.is-fullscreen .el-loading-spinner {
	margin-top: -25px
}

.el-loading-mask.is-fullscreen .el-loading-spinner .circular {
	height: 50px;
	width: 50px
}

.el-loading-spinner {
	top: 50%;
	margin-top: -21px;
	width: 100%;
	text-align: center;
	position: absolute
}

//颜色
@each $colorkey, $color in $colors {
	.text-#{$colorkey} {
		color: $color;
	}

	.bg-#{$colorkey} {
		background-color: $color;
	}
}

//对齐
@each $var in (left, center, right) {
	.text-#{$var} {
		text-align: $var !important;
	}
}

//flex
@each $key, $value in $flex-jc {
	.jc-#{$key} {
		justify-content: $value;
	}
}

@each $key, $value in $flex-ai {
	.ai-#{$key} {
		align-items: $value;
	}
}

//字体
@each $fontkey, $fontvalue in $font-sizes {
	.fs-#{$fontkey} {
		font-size: $fontvalue * $base-font-size;
	}
}

//.mt-1 => margin top
//spacing

@each $typekey, $type in $spacing-types {
	//.m-1
	@each $sizekey, $size in $spacing-sizes {
		.#{$typekey}-#{$sizekey} {
			#{$type}: $size * $spacing-base-size;
		}
	}

	//.mx-1
	@each $sizekey, $size in $spacing-sizes {
		.#{$typekey}x-#{$sizekey} {
			#{$type}-left: $size * $spacing-base-size;
			#{$type}-right: $size * $spacing-base-size;
		}

		.#{$typekey}y-#{$sizekey} {
			#{$type}-top: $size * $spacing-base-size;
			#{$type}-bottom: $size * $spacing-base-size;
		}
	}

	//.mt-1
	@each $directionkey, $direction in $spacing-directions {
		@each $sizekey, $size in $spacing-sizes {
			.#{$typekey}#{$directionkey}-#{$sizekey} {
				#{$type}-#{$direction}: $size * $spacing-base-size;
			}
		}
	}

	.#{$typekey} {
		#{$type}: 0;
	}
}
